<template>
  <div>
    <h1>playground</h1>
    <!--
        mouseenter和mouseleave
        // 鼠标移入 鼠标移出
          是否冒泡？？ 不会
        mouseover和mouseout
        // 鼠标移入 鼠标移出
          是否冒泡？？ 会冒泡
        mousemove
          鼠标移动
     -->
    <!-- 可以给子组件传方法 -->
    <son-comp :shuaiqian="shuaiqian" />
    <!--
      upload-excel
        on-success - 处理成功读取excel
        before-upload - 上传前作些事情 校验
            接收file对象 file能拿到上传的文件信息
             比如可以校验文件大小 校验文件名长度 等等
     -->
    <upload-excel :on-success="handleSuccess" :before-upload="beforeUpload" />
    <!--
      el-table
         data - 表格的数据
      el-table-column
          有多少列 就有几个
          for of  遍历数组 拿的就是数组的元素 表头的每一项 （中文的）
          label - 展示表头叫什么名字 - 中文
          prop  - 映射 对象的键（中文）
     -->
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
  </div>
</template>

<script>
import SonComp from './components/son-comp.vue'
export default {
  components: {
    SonComp
  },
  data() {
    return {
      tableData: [],
      tableHeader: []
    }
  },
  methods: {
    // 练习父传子，传方法，自定义方法
    shuaiqian(a, b) {
      console.log(a, b)
    },
    /**
     * file - 文件对象 上传的文件
     */
    beforeUpload(file) {
      /**
       * file.size 以字节数为单位的文件大小。 默认B
       * 1024B = 1KB => 1024B / 1024 = 1KB
       * 1024KB = 1MB => 1024kB / 1024 = 1MB
       *
       * file.size / 1024 / 1024 转成单位MB
       * isLt1M - 是否小于1MB
       * 如果 true  代表小于1MB
       * 如果 false 大于1MB
       */
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        // 小于1M 返回true 校验成功
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      // 返回false 代表校验失败
      return false
    },
    /** 下面解构了
     * results - （表格非表头）的内容
     * header - 表头
     */
    handleSuccess({ results, header }) {
      this.tableData = results
      this.tableHeader = header
    }
  }
}
</script>

<style>

</style>
